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Module Objective 

The Page Layout Module Is in charge of constructing the full Portal Page HTML by retrieving the 
IVIews content from the Page Builder and merging It into the wrapping layout template htm! to 
provided the desired page look and content arrangement. 

The Page Layout Module architecture supports flexibility in the content arrangement on the page 
by providing a template-based parameterized-controlled infrastructure for the pages layout 
definition, 



Design Overview 

Terms in use 

JSP Template - A JSP file which defines a template for a page layout. Mainly contains HTM LB 
components and Layout TagLIb components. 

Page Builder - The module in charge of building the page's POM, fetching the ivlews data and 
calling the Layout Component to construct the full page. 

Layout Component - The main run-time engine for constructing page layout. A JSP Template 
based Portal Component that takes place in the page's POM, 

Main Content Storage - Component that holds and manages IVIews data (content, tray) 
fetched or created by Page Builder. Layout Component reads data from the component, aka 
"Main Storage Container". 

Layout TagLib- (JSP) Tag Library in use within JSP Templates to serve Layout Component 
needs (i.e. - place holders for iViews Containers). 

iViews Container- A page layout entity which contains iViews that should be presented 
together, in a certain order, on the page (i.e. - one column of Ivlews) 

ILayoutStructure -Interface for getting page layout structure as containers 
and ivlews arrangement on the page. 
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Architecture and Core Behaviors 
General Architecture Description 

Remark - This section describes the key players and the general concept in the page layout and 
html creation. 




A pre-defined JSP Template holds a general structure for the page layout (i.e. - 
template for pages with 3 vertical columns) 

The Page Builder gets a request for a certain page and builds the required POM, which 
includes the page's ivlews, and the Layout Component, which is an Abstract Porta! 
Component, generated from the JSP Template. 

The Portal Component Profile for the Layout Component represents the page layout 
definitions as stored in the PCD. 

The Page Builder calls an ILayoutStructure object which translate the Layout Component 
profile to the requested semantic data (i.e. - the order the iviews should appear in the 
page). 

The Page Builder stores the Iviews generated content in the Main Content Storage 
object. 

The Layout Component calls the Mews Containers tag handlers to include their iviews 
content in the necessary position in the page. 

Each tag handler calls the ILayoutStructure to get the list of the iViews it should Include 
and then turns to the Main Content Storage to get the IViews data to include in the 
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The JSP Template 

A JSP file is used as a layout template for the page rendering. The file contains mainly HTMLB 
components (using HTMLB TagLib) and page layout specific objects (using Layout TagLib). 
Each portal page is associated with one of the pre-defined JSP Templates to set it s layout 

The EP will be provided with several Out-Of-The-Box JSP Templates (i.e. 2 columns page, 3 
columns Page etc.). The customer will be able to create new JSP Templates to serve his unique 
layout (and page template) specifications. 

At Run-Time the JSP Template, associated with the page, will be loaded by the PRT and added 
to the Page POM, as the Layout Component, under the Page Builder. 

The approach of establishing the Page Layout mechanism upon JSP Templates provide several 

^"flexibility - The template can be modified by the customer, thus creating any kind of 
layout template according to his needs (i.e. - a layout template of 



one row followed by three columns followed by another row 



. PRT supported - Being JSP based, the template Is 'naturally' loaded and compiled as an 

AbstractPortalComponent and used in the Page POM. 
. HTMLB - Using HTMLB TagUb enables basing the template upon HTMLB components 

thus enjoying HTMLB rendering and styling services. 
. Devices - Optional approach to support different layouts for different devices can be 

using several device-oriented JSP Templates for the same page. 

HTMLB Grid Layout component Is used as a primary component to set the page layout structure. 
The Layout TagLib 

Defines tags to be used in the JSP Templates to serve layout purposes. 
The module provide tagllb definitions and tag-handlers implementation. 

The Container Tag 

A place-holder for IViews Container. 

Attributes: 

Id - unique Identifier for the container within this JSP Template. 

orientation - either Vertical' or 'horizontal'. Sets orientation for iViews arrangement within the 

container. 

Syntax: 

<lyt:container id = "container!" orientation="vertical"/> 
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JSP Template Code Example 

Example for three-columns-layout JSP Template 



<%S taglib uri="prt: taglib: tlhtmlb" pref ix= "hbj " %> 






<%S taglib uri="prt: taglib: tllayout" prefix="lyt" %> 






<hbj:content id="myContext " > 






<hbj:page title="Portal Page"> 






<Hl>Two Columns Layout</Hl> 






<hbj jgridLayout id="myGridLayoutl" width="100% 


> 




<hbj :gridLayoutCell rowIndex="l" columnIndex= 


1" width- 


'50*" 


verticalAlignment="top"> 




/> 


<lyt: container id="columnl" orientation= 


vertical" 


</hbj :gridLayoutCell> 






<hbj igridLayoutCell rowIndex="l" columnIndex= 


2" width- 


'50%" 


varticalAlignment="top"> 






<lyt: container id=" column2" orientation= 


vertical" 


/> 


</hbj :gridLayoutCell> 






</hbj :gridLayout> 






</hbj :page> 






</hbj:content> 







The Container Tag Handler 

This Tag Handler writes the iViews' content to the page, according to their arrangement in the 
Mews Container. 

Handling sequence 

1. Acquire reference to ILayoutStructure implementing object. 

2. Get List of iViews in Container (call ILayoutStructure igetContainerlViews). 

3. - Acquire reference to Main Content Storage f IContentStoraqe implementation). 

4. Create HTM LB GridLayout component. 

5. For each IView in the List of iViews - 

a. Create HTM LB GridLayoutCell component. 

b. Retrieve iVIew's content . 

c. Set GridLayoutCell content to IVIew's content. 

d. Add GridLayoutCell to GridLayout. 

6. Render GridLayout. 

The Orientation Property 

Property determines whether container should be presented as column (value = "vertical") or as 
row (value = "horizontal") of iviews. 

For vertical orientation the GridLayout will have one column and many rows (as iViews number). 
For horizontal orientation it will have one row and many columns. 



Html styles for the container will be affected by the wrapping html styles. There will be no 
specific styling attributes for the IViews Container in the JSP Template. 
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Key APIs 

Interface ILayoutStructure 



public interface ILayoutStructure 

Title: ILayoutStructure 

Description: Interface for getting page layout structure as containers and iviews 
arrangement on the page. 
Copyright (c) SAP Europe GmbH 2002 



java.util.List 



np.tconta ine riViews fiava.Iana.String container*!) 

Get a list of iviews in a certain IViews Container, ordered by their 
rendering order on the page. 



java.util.List 



Get a list of all iviews In the Page, ordered by their rendering order on 
the page. 



Get a list of all iviews In the Page, ordered by their rendering order on 
the page. , 



-Method -Detail 

get Container! Views 

public java.util.List getContainerIViews(java.lang.Strlng containerld) 

Get a list of iviews in a certain iViews Container, ordered by their rendering order on the 
page. 

Parameters: 

containerld - The iViews Container ID. 
Returns: 

The iViews list. 



getPagelViews 
public java.util.List getPageIViews() 

Get a list of all iviews in the Page, ordered by their rendering order on the page. Full iViews 
sequence will be returned, including iViews that apprears more than once In the page. 
Returns; 

The iViews List (including duplicates). 



getPagelViewsNoDuplicates 
public java.util.List getPageWiewsNoDuplicates() 

Get a iist of all iviews In the Page, ordered by their rendering order on the page. iViews 
sequence will be returned, but with no duplicates, each iView will appear only once in the 
returned iist. 
Returns: 

The iViews List (no duplicates). 
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Remarks 

• Provided the current PCD layout attributes structure, the implementing object might 
need to perform more initialisation actions as building a key-value mapping 
enumeration between container Id in the JSP Template and container identifier in PCD. 
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Detailed Design 

Layout PCD Structure 

A Page context will have sub-context for each defined layout for the page. Each page will have 
one-primary layout (per device ?) which is the default layout presented to the user. The 
administrator can define alternative layouts for the user to choose from. 

Each Layout sub-context holds the following sets of properties (distinguished by name-space): 
. Iviews arrangement - stores iViews arrangement inside Mews Containers. 
* General Properties - admin defined properties to be used in JSP Template. 



Second container 



Jvlew 



First container 



Third container 



Title = "myLayout" 
Containers arrangement ^ 
contl.id = "myContainerl" ^ 
cont2.1d = "myContainer2" 
cont3.id = "myLastContainer" 
contl. title = "my Container 1" 
cont2.title = "my Container 2" 
cont3.title = "my Last Container" 



Mapping between containers sequence on 
the page and their Id (as mentioned In the 
]SP Template) . 

Attribute name Is contX where X represent 
the sequence. 



IViews arrangement 
contl, Ivul = "Iviewl" 
contl. Ivu2 = "Iview2" 
cont2.ivul = "Iview3" 
cont2.ivu2 = "Iview4" 
cont3.ivul = "IviewS" 



Iviews arrangement Inside containers. 
Attribute name Is contXJvuY where contX 
is the container Identifier and Y represents 
the Ivu position In the IViews sequence In 
the container. 
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o Iview3 
o Ivlew4 
o IvIewS 

activeLayout = Layoutl 



Updated design - 

<component name="pageLayout" > 

<component-proflle> 

<property name="contl" value="headerContainer"> 

<property name="title" value="Header Area"/> 

<property name="ivul" value="pageBuilder,ivlew7> 

<property name="lvu2" value="pageBuilder,lvlew7> 
</property> 

<property name="cont2" value="navPanelContainer > 

<property name= ,, tltie" value="Navigation Pane!"/> 

<property name="ivul" value="pageBuilder.lview7> 

<property name="ivu2" value="pageBullder.iview7> 

<property name="ivu3" value="pageBuilder.iview7> 
</property> 

<property name="cont3" value="workAreaContainer"> 

<property name="title" value="Work Area"/> 

<property name="ivul" value="pageBullder.lv!ew7> 
</property> 
</component-proflle> 
</component> 

remark: cont names represent sequence. Editing layout (jsp) and changing containers sequence 
must be followed by cont names update in PCD/Profile, 
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°i P6ri Frameset Support - special JSP Template ? actual page created ? special Layout Tags ? 
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